<template>
	<view>
		<ttBar bgColor="#f6f6f6" :showZhanwei="true">
			<template v-slot:leftCnt>
				    <text style="font-size: 36rpx;">找培训</text>	
			</template>
			<template v-slot:rightCnt>
				<view class="searchBox" data-url="shopsearch" @tap="toPage">
					<text>搜索一下</text>
					<text class="iconfont icon-search"></text>
				</view>
			</template>
		</ttBar>
		<view class="content">
			<view class="shoplist" v-for="(item, index) in shoplist" :key="index" @tap="toshop(item.id)">
				<view class="imgbox"><image :src="item.logo"></image></view>
				<view class="rightbox">
					<view class="shopname">
						<text>{{ item.name }}</text>
					</view>
					<view class="wenzixq">
						<view class="wuxing"><text class="iconfont icon-wujiaoxingxingxingshoucang"></text></view>
						<view class="wuxing wuxing1">
							<text>{{ star }}</text>
						</view>
						<view class="time" v-if="item.oldAndNewLogo == 1"><text>新</text></view>
						<view class="time time1" v-if="item.powerLogo == 1"><text>助</text></view>
						<view class="time time2" v-if="item.powerLogo == 2"><text>拼</text></view>
					</view>
					<view class="webzibottom" style="color: #818181; font-size: 28rpx;">
						<text style="float: left;" v-if="item.streetName">{{ item.streetName }}</text>
						<text style="float: right;margin-right: 10rpx;">{{ dis }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="isOver" v-if="shoplist.length > 10">-----我是有底线的-----</view>
		<view v-if="shoplist.length < 1"><emptyBox></emptyBox></view>
	</view>
</template>

<script>
	import COMM from '@/common/common.js';
	import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import searchBar from '@/components/searchBar/searchBar.vue';
export default {
	computed: {
		...mapState({
			locationCity: state => state.map.locationCity,
			roads: state => state.map.roads,
			selectCity: state => state.map.selectCity,
			initInfo: state => state.sys.initInfo,
			roads: state => state.map.roads,
			isLogin: state => state.user.isLogin,
			userInfo: state => state.user.userInfo,
		})
	},
	data() {
		return {
			shoplist:[],
			hasNext:true,
		    page: 1,
			text:'',
			page_size:15,
			dis: '0米',
			star:0,			
			page_no: 1,
			page_size: 15
			
			
		};
	},
	methods: {
		shopshow(){
			

				if (this.hasNext) {
					this.$store.dispatch("queryStore",{
						page_no:this.page_no,
						page_size:this.page_size,
						storeName:'',
						orderBy:5,
						longi : this.roads.longitude,
						lati :this.roads.latitude						
					}).then(res => {
						this.shoplist = [...this.shoplist,...res.data.stores.items]						
						this.page_no = res.data.stores.nextPage;
						this.hasNext = res.data.stores.hasNext;
						for (var i = 0 ; i < res.data.stores.items.length;i++){
							if(res.data.stores.items[i].score == 0){
								this.star = 5
							}else{
								this.star = res.data.stores.items[i]
							}
						}
						for (var i = 0; i < this.shoplist.length; i++) {
							let lat1 = this.shoplist[i].lati;
							let lng1 = this.shoplist[i].longi;
							let lat2 = this.roads.latitude;
							let lng2 = this.roads.longitude;
							this.dis = COMM.getDis(lat1, lng1, lat2, lng2);
						}

					})
				} else {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'											
					});
					
				}
		},
		toshop(id){
			this.toPage({
				url:'shopDetail',
				id:id
			})
		}


	},
	onLoad(data) {		
		this.shopshow()
	},
	onShow() {
		
		this.text = uni.getStorageSync("abc")
		console.log(this.text)
		if(this.text){
			uni.showLoading({
				title: '正在加载...',
				mask: false
			});
			this.shoplist = [];
			this.page_no = 1			
			this.$store.dispatch("queryStore",{
				page_no:this.page_no,
				page_size:this.page_size,
				storeName:this.text,
				orderBy:5,
				longi : this.roads.longitude,
				lati :this.roads.latitude						
			}).then(res => {
				uni.hideLoading();
				var that = this
				uni.removeStorage({
				    key: 'abc',
				    success: function (res) {
				       that.text = ''
				    }
				});
				this.shoplist = [...this.shoplist,...res.data.stores.items]	
				console.log(res.data.stores)
				this.page_no = res.data.stores.nextPage;
				this.hasNext = res.data.stores.hasNext;
				for (var i = 0 ; i < res.data.stores.items.length;i++){
					if(res.data.stores.items[i].score == 0){
						this.star = 5
					}else{
						this.star = res.data.stores.items[i]
					}
				}
				for (var i = 0; i < this.shoplist.length; i++) {
					let lat1 = this.shoplist[i].lati;
					let lng1 = this.shoplist[i].longi;
					let lat2 = this.roads.latitude;
					let lng2 = this.roads.longitude;
					this.dis = COMM.getDis(lat1, lng1, lat2, lng2);
				}
						
			})
		
			// if (this.hasNext) {
				
			// } else {
			// 	this.hasNext=true
			// 	uni.showToast({
			// 		title: '没有更多数据了',
			// 		icon: 'none'
					
			// 	});
				
			// }
		}

	},
	onReachBottom(){

		if(!this.text){
			this.shopshow()
		}
		
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.shoplist = [];
			this.page_no = 1;
			this.hasNext = true
			this.shopshow()
			uni.stopPullDownRefresh();

		}, 1500)
	}

};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.content {
	width: 100%;
	.shoplist {
		display: flex;

		width: 100%;
		height: 240rpx;
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		.imgbox {
			display: flex;
			align-items: center;
			margin: 0 20rpx;

			image {
				border-radius: 10rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}
		.rightbox {
			width: 454rpx;
			padding-top: 15rpx;
			overflow: hidden;
			.shopname {
				height: 84rpx;
				overflow: hidden;
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 10rpx;
				padding-right: 8rpx;
			}
			.wenzixq {
				display: flex;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				.time {
					width: 50rpx;
					height: 50rpx;
					background-color: #f46561;
					text-align: center;
					border-radius: 10rpx;
					margin-right: 10rpx;

					text {
						line-height: 50rpx;
						color: #fff;
					}
				}
				.time1 {
					background-color: #ffb600;
				}
				.time2 {
					background-color: #00a0e9;
				}
				.wuxing {
					width: 30rpx;
					height: 50rpx;
					text-align: center;
					border-radius: 5rpx;

					text {
						line-height: 50rpx;
						color: #fe6f03;
					}
				}
				.wuxing1 {
					margin-right: 30rpx;
				}
			}
		}
	}
}
.searchBox {
	display: flex;
	height: 60rpx;
	width: 360rpx;
	border-radius: 30rpx;
	background-color: #fff;
	align-items: center;
	flex-grow: 1;
	padding: 0 30rpx;
	justify-content: center;
	position: relative;
	text {
		font-size: 26rpx;
		color: #aeb5bf;
		margin-right: 14rpx;
	}
	.icon-search {
		position: absolute;
		right: 0;
	}
}
.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #fff;
		font-size: 28rpx;
	}
</style>
